<template>
	<view class="content-box" @click="hideKeyboard">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('recharge.cc')" :leftIcon="true"></navbar>
		
		<!-- 充值金额输入区域 -->
		<view class="recharge-input-area" @click.stop>
			<view class="input-label">{{ t('recharge.qsrczje') }}</view>
			<view class="amount-display" @click="showKeyboard">
				<text class="amount">{{ inputAmount }}</text>
				<text class="currency">USDT</text>
			</view>
		</view>
		
		<!-- 快速选择金额 -->
		<view class="quick-amount-grid" @click.stop>
			<view class="quick-amount-item" 
				v-for="amount in quickAmounts" 
				:key="amount" 
				@click="selectAmount(amount)">
				{{ amount }}
			</view>
		</view>
		
		<!-- 自定义键盘 -->
		<view class="keyboard" v-if="showKeyboardFlag" @click.stop>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('1')">1</view>
				<view class="key" @click="inputKey('2')">2</view>
				<view class="key" @click="inputKey('3')">3</view>
			</view>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('4')">4</view>
				<view class="key" @click="inputKey('5')">5</view>
				<view class="key" @click="inputKey('6')">6</view>
			</view>
			<view class="keyboard-row">
				<view class="key" @click="inputKey('7')">7</view>
				<view class="key" @click="inputKey('8')">8</view>
				<view class="key" @click="inputKey('9')">9</view>
			</view>
			<view class="keyboard-row">
				<view class="key dot" @click="inputKey('.')">.</view>
				<view class="key" @click="inputKey('0')">0</view>
				<view class="key delete" @click="deleteKey">
					<image src="/static/icon/delete.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="submit-btn btn-primary" v-if="!showKeyboardFlag && inputAmount!=0" @click="toOrder">
			{{t('common.confirm')}}
		</view>
		<GlobalPopup ref="popup"></GlobalPopup>
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import { useI18n } from 'vue-i18n';
	import { tronOrderApi } from '@/utils/api.js';
	const { t, locale } = useI18n();
	const popup = ref()
	
	// 输入的金额
	const inputAmount = ref('0.00');
	
	// 控制键盘显示状态
	const showKeyboardFlag = ref(false);
	
	// 显示键盘
	const showKeyboard = () => {
		showKeyboardFlag.value = true;
	};
	
	// 隐藏键盘
	const hideKeyboard = () => {
		showKeyboardFlag.value = false;
	};
	
	// 快速选择金额
	const quickAmounts = [100, 500, 1000, 3000, 5000, 10000, 20000, 50000];
	
	// 选择预设金额
	const selectAmount = (amount) => {
		inputAmount.value = amount.toString();
		showKeyboardFlag.value = false; // 选择金额后隐藏键盘，显示确认按钮
	};
	
	// 输入数字
	const inputKey = (key) => {
		// 如果当前值是0.00，则清除后再输入
		if (inputAmount.value === '0.00') {
			if (key === '.') {
				inputAmount.value = '0.';
			} else {
				inputAmount.value = key;
			}
			return;
		}
		
		// 处理小数点
		if (key === '.') {
			if (inputAmount.value.includes('.')) {
				return; // 已经有小数点了，不再添加
			}
		}
		
		// 限制小数点后只能有两位
		if (inputAmount.value.includes('.')) {
			const parts = inputAmount.value.split('.');
			if (parts[1] && parts[1].length >= 2 && key !== '.') {
				return; // 已经有两位小数了
			}
		}
		
		// 添加输入的数字或小数点
		inputAmount.value += key;
	};
	
	// 删除数字
	const deleteKey = () => {
		if (inputAmount.value.length > 1) {
			inputAmount.value = inputAmount.value.slice(0, -1);
		} else {
			inputAmount.value = '0.00';
		}
	};
	// 前往订单页
	const toOrder = async () => {
		try {
			// 验证输入金额
			const amount = parseFloat(inputAmount.value);
			
			if (!amount || amount <= 0) {
				popup.value.open({
					title: t('common.error'),
					content: '请输入有效的充值金额',
					loading: false,
					warning: true
				});
				return;
			}
			
			// 调用创建订单API（不显示加载状态，让下一个页面处理）
			const response = await tronOrderApi.create({
				amount: amount
			});
			
			// 检查响应
			if (response && response.data) {
				const orderId = response.data.orderId || response.data.id || response.data;
				// 直接跳转到订单页面，传递订单ID，让订单页面处理加载状态
				uni.navigateTo({
					url: `/pages/home/rechargeOrder?orderId=${orderId}`
				});
			} else {
				throw new Error('创建订单失败，未返回订单号');
			}
			
		} catch (error) {
			console.error('创建订单失败:', error);
			popup.value.close(); // 确保关闭加载弹窗
			popup.value.open({
				title: t('common.error'),
				content: error.message || '创建订单失败，请重试',
				loading: false,
				warning: true
			});
		}
	};
	onMounted(() => {
		// 页面初始化完成
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
	.submit-btn{
		width: 570.35rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		margin: 60rpx auto 0;
		position: fixed;
		bottom: 69.69rpx;
		left: 88.85rpx;
	}
	.recharge-input-area {
		padding: 40rpx;
		margin-top: 20rpx;
		
		.input-label {
			color: #6C727F;
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		.amount-display {
			display: flex;
			justify-content: center;
			align-items: baseline;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			cursor: pointer;
			
			.amount {
				font-size: 48.84rpx;
				font-weight: 900;
				color: #121826;
				padding: 0 40rpx;
				border-bottom: 1px solid #E5E7EB;
			}
			
			.currency {
				font-size: 20.93rpx;
				font-weight: 500;
				color: 333;
				margin-left: 10rpx;
			}
		}
	}
	
	.quick-amount-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0 40rpx;
		margin-top: 40rpx;
		gap: 13.94rpx;
		width: 100%;
		box-sizing: border-box;
		.quick-amount-item {
			height: 69.77rpx;
			background-color: #fff;
			border-radius: 34rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 5.24rpx;
			font-size: 24.42rpx;
			font-weight: 500;
			color: #000;
			width: 120.81rpx;
		}
	}
	
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx;
		background: #F9FAFB;
		border-radius: 69.77rpx 69.77rpx 0rpx 0rpx;
		
		.keyboard-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.key {
				width: 200rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 48rpx;
				font-weight: 600;
				color: #121826;
				
				&.delete {
					image {
						width: 54rpx;
						height: 54rpx;
					}
				}
			}
		}
	}
</style>